<template>
  <div class="detail-panel" style="width:450px;border-radius:10px;">
    <div class="item">
      <div class="label">预约人姓名</div>
      <div class="text">{{this.reservationInfo.memberName}}</div>
    </div>
    <div class="item">
      <div class="label">选择宠物</div>
      <div class="text">{{this.reservationInfo.petName}}</div>
    </div>
    <div class="item">
      <div class="label">预约时间</div>
      <div class="text">{{this.reservationInfo.appointment}}</div>
    </div>
    <div class="item">
      <div class="label">联系电话</div>
      <div class="text">{{this.reservationInfo.user_phone}}</div>
    </div>
    <div v-if="this.reservationInfo.type  == 1">
      <div class="item">
        <div class="label">不适状况描述</div>
        <div class="text">{{this.reservationInfo.content.disComfort}}</div>
      </div>
      <div class="item">
        <div class="label">医院要求或其他情况说明</div>
        <div class="text">{{this.reservationInfo.content.otherDescribe}}</div>
      </div>
    </div>
    <div v-if="this.reservationInfo.type  == 2">
      <div class="item">
        <div class="label">体检套餐</div>
        <div class="text">{{this.reservationInfo.content.medicalPackage}}</div>
      </div>
      <div class="item">
        <div class="label">自选选项</div>
        <div class="text">{{this.reservationInfo.content.customPackage}}</div>
      </div>
      <div class="item">
        <div class="label">医院要求或其他情况说明</div>
        <div class="text">{{this.reservationInfo.content.otherDescribe}}</div>
      </div>
    </div>
    <div v-if="this.reservationInfo.type  == 3">
      <div class="item">
        <div class="label">最近狂犬免疫时间</div>
        <div class="text">{{this.reservationInfo.content.immunityTime}}</div>
      </div>
      <div class="item">
        <div class="label">免疫药物品牌</div>
        <div class="text">{{this.reservationInfo.content.drugBrand}}</div>
      </div>
      <div class="item">
        <div class="label">免疫不良反应</div>
        <div class="text">{{this.reservationInfo.content.untowardEffect}}</div>
      </div>
      <div class="item">
        <div class="label">不良反应药物品牌</div>
        <div class="text">{{this.reservationInfo.content.untowardDrugBrand}}</div>
      </div>
      <div class="item">
        <div class="label">预约免疫项目</div>
        <div class="text">{{this.reservationInfo.content.immunityProject}}</div>
      </div>
      <div class="item">
        <div class="label">医院要求或其他情况说明</div>
        <div class="text">{{this.reservationInfo.content.otherDescribe}}</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return{
      reservationInfo:{
        appointment: "",
        content: {},
        id: 0,
        memberName: "",
        petName: "",
        type: 0,
        user_phone: ""
      }      
    }
  },
  mounted(){
    this.getReservationInfoData();
    this.getReservationType();
  },
  methods:{
    getReservationInfoData(){
      let id = this.$route.params.id;
      this.axios.get('/inquiry/show/'+id,{}).then(response => {
        if(response.data.code == 200){
          this.reservationInfo = response.data.data[0];
          this.reservationInfo.content = JSON.parse(this.reservationInfo.content);
        }else{
          this.$message({
            message: response.data.msg,
            type: 'error'
          });
        }
      });
    },
    getReservationType(){
      if(this.$route.params.type){
        this.reservationInfo.type = this.$route.params.type;
      }else{
        let id = this.$route.params.id;

        this.axios.get('/inquiry/show/'+id,{}).then(response => {
          if(response.data.code == 200){
            if(response.data.data[0].type)
              this.reservationInfo.type  = response.data.data[0].type;
          }else{
            this.$message({
              message: response.data.msg,
              type: 'error'
            });
          }
        });
      }
    }
  }
}
</script>
